<template>
  <div class="pay-back-box">
    <div class="pay-result">
      <span v-if="route.query.payResult === 'true'" class="iconfont icon-queren2 green"></span>
      <span v-else class="iconfont icon-shanchu red"></span>
      <p v-if="route.query.payResult === 'true'" class="success">支付成功</p>
      <p v-else class="fail">支付失败</p>
      <p>订单号：{{ route.query.orderId }}</p>
      <div class="btn">
        <el-button type="primary" @click="$router.push('/')">继续购物</el-button>
        <el-button @click="$router.push('/member/order')">查看订单</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
// 支付结果
const payResult = ref('')
const orderID = ref('')

onMounted(() => {
  // 获取支付结果
  const orderID = route.query.orderId
  const payResult = route.query.payResult
  if (payResult === 'true') {
    ElMessage.success('支付成功')
  } else {
    ElMessage.error('支付失败')
  }
})
</script>

<style scoped lang="scss">
.pay-back-box {
  padding: 100px 0;

  .pay-result {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    padding: 50px 0;

    span {
      font-size: 60px;

      &.green {
        color: #1dc779;
      }

      &.red {
        color: #e05151;
      }
    }

    p {
      font-size: 18px;
      margin-top: 30px;

      &.success {
        color: #1dc779;
      }

      &.fail {
        color: #e05151;
      }
    }

    .btn {
      margin-top: 50px;
    }
  }
}
</style>

